<template>
	<view>
		<!-- <cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">直播</block>
		</cu-custom> -->

		<view class="live-bg">
			<view class="bg filter">
				<image v-if="detail" :src="detail.detail.thumb" mode="aspectFill"></image>
				<image v-else :src="CLOUDPATH+'/gsc/livebg4.jpg'" mode="aspectFill"></image>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="live-video">
			<live-pusher id="livepusher1" ref="livepusher1" :url="detail.push_url" :mode="quality" :muted="muted" :enable-camera="enableCamera"
			 :auto-focus="autoFocus" :beauty="beauty" :whiteness="whiteness" aspect="9:16" postition="absolute" @statechange="statechange"
			 @netstatus="netstatus" @error="error" :style="'height:'+height+'px'"></live-pusher>
		</view>
		<!-- #endif -->
		<block v-if="detail">
			<view class="live-controller">
				<view class="space-between top-controller align-center padding-lr">
					<view class="  flex-start flex">
						<view class="  cu-tag round text-white margin-right  text-sm status-view">
							<text v-if="playing==0">未开播</text>
							<text v-if="playing==1"><text class="text-green ">{{netstatusText}}</text>：{{playingTime}}秒</text>
							<text v-if="playing==2">暂停中</text>
							<text v-if="playing==3">已结束</text>
						</view>
						<view class="cu-btn round text-white margin-right  status-view text-sm sm" v-if="playing==1" @tap="readyPause">
							<text class="cuIcon-stop default"></text>
						</view>
						<view class="cu-btn  round text-red margin-right  status-view text-sm sm" v-if="playing==1" @tap="readyStop">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view class="flex flex-end">
						<view class="round blackbg text-white padding-xs margin-right-sm text-sm">{{memberNum}}人在线</view>
						<view class="cuIcon cuIcon-camera round blackbg text-white padding-xs margin-right-sm" @tap="switchCamera"></view>
						<view class="cuIcon cuIcon-settings blackbg round text-white padding-xs " @tap="settingModal=true"></view>
					</view>
				</view>
				<view class="start-view text-center text-shadow">
					<view>
						<block v-if="playing==0">
							<block v-if="readyStartNumber>0">
								<view class="text-xxxxl text-white text-shadow">{{readyStartNumber}}</view>
							</block>
							<block v-else>
								<view class="text-xxxl text-white text-shadow">直播未开始</view>
								<view class="text-white margin-top"><text class="cuIcon-time"></text>计划于{{detail?detail.detail.start_time:''}}开播</view>
								<view class="cu-btn margin-top lg round padding-lr-lg" :class="['bg-'+theme,'bg-gradual-'+theme]" @tap="readyStart">开始直播</view>
								<view>
									<view class="cu-btn margin-top lg round padding-lr-lg line-white"  @tap="goback">退出</view>
								</view>
							</block>
						</block>
						<block v-if="playing==2">
							<view class="text-xxxl text-white text-shadow">直播暂停中</view>
							<view class="cu-btn margin-top lg round padding-lr-lg" :class="['bg-'+theme,'bg-gradual-'+theme]" @tap="readyResume">继续直播</view>
						</block>
						<block v-if="playing==3">
							<view class="text-xxxl text-white text-shadow">直播已结束</view>
							<!-- <view class="cu-btn margin-top lg round padding-lr-lg" :class="['bg-'+theme,'bg-gradual-'+theme]" @tap="readyStart">重新开播</view> -->
							<view class="cu-btn margin-top lg round padding-lr-lg" :class="['line-'+theme]" @tap="goback">返回</view>
						</block>
					</view>
				</view>
				<view class="comment-view">
					<TIMComment ref="TIMComment" v-on:memberChange="memberChange"></TIMComment>
				</view>
			</view>
		</block>
		<view class="cu-modal bottom-modal " :class="settingModal?'show':''" @tap="settingModal = false">
			<view class="cu-dialog" @tap.stop="">
				<view class="">
					<view class="cu-form-group">
						<view class="title">是否开启摄像头</view>
						<switch @change="enableCameraHandle" :class="[enableCamera==true?'checked':'',theme+'']" :checked="enableCamera?true:false"></switch>
					</view>
					<view class="cu-form-group">
						<view class="title">是否静音</view>
						<switch @change="mutedHandle" :class="[muted?'checked':'',theme]" :checked="muted?true:false"></switch>
					</view>
					<view class="cu-form-group">
						<view class="title">清晰度</view>
						<radio-group class="block" @change="qualityChange">
							<radio :class="[quality=='SD'?'checked':'',theme]" :checked="quality=='SD'?true:false" value="SD">SD(标清)</radio>
							<radio :class="[quality=='HD'?'checked':'',theme]" :checked="quality=='HD'?true:false" value="HD">HD(高清)</radio>
							<radio :class="[quality=='FHD'?'checked':'',theme]" :checked="quality=='FHD'?true:false" value="FHD">FHD(超清)</radio>
						</radio-group>
					</view>
					<view class="cu-form-group">
						<view class="title" style="min-width: 120rpx;">美颜</view>
						<view class="w100 text-right">
							<slider min="0" max="9" step="1" :value="beauty" @change="beautyHandle" show-value="true"></slider>
						</view>
					</view>
					<view class="cu-form-group">
						<view class="title" style="min-width: 120rpx;">美白</view>
						<view class="w100 text-right">
							<slider min="0" max="9" step="1" :value="whiteness" @change="whitenessHandle" show-value="true"></slider>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TIMComment from '@/components/default/TimComment.vue'
	export default {
		components: {
			// Comment,
			TIMComment,
		},
		data() {
			return {
				detail: null,
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				playing: false,
				context: null,
				fil: true,
				beauty: 9, //美颜,取值范围 0-9（iOS取值范围为1）,0 表示关闭
				whiteness: 9, //美白,取值范围 0-9（iOS取值范围为1),0 表示关闭
				quality: 'FHD', //推流视频模式,可取值:SD(标清),HD（高清）, FHD（超清）    
				muted: true, //是否静音    
				height: '100px', //高度    
				enableCamera: true, //开启摄像头    
				autoFocus: true, //自动聚集    
				height: 0,
				readyStartNumber: 0,
				redayTimeInterval: null, //开始计时器
				playingTime: 0,
				playingTimeTxt: '',
				playTimeInteraval: null, //直播计时器
				netstatusText: '网络良好',
				settingModal: false,
				memberNum:0,
			}
		},
		onLoad(options) {
			this.id = options.id
			if (options.share_id) this.share_id = options.share_id
			if (!this.id) {
				this.$common.showError('参数有误', function() {
					uni.navigateBack({})
				})
				return
			}
			if (this.$common.loginAuth(true)) {
				this.getDetail()
			}
		},
		beforeDestroy() {
			if (this.redayTimeInterval) clearInterval(this.redayTimeInterval)
			if (this.playTimeInteraval) {
				clearInterval(this.playTimeInteraval)
			}
			this.quitTIM()
		},
		onUnload() {
			if (this.redayTimeInterval) clearInterval(this.redayTimeInterval)
			if (this.playTimeInteraval) {
				clearInterval(this.playTimeInteraval)
			}
		},
		methods: {
			loginIm() {
				this.$common.getMember().then((member) => {
					if (!this.$refs.TIMComment) {
						setTimeout((r) => {
							this.loginIm()
						}, 500)

						return
					}
					console.log(this.$refs.TIMComment)
					let inUser = {
						userId: 'member_' + member.id,
						name: member.nickname,
						thumb: member.head_portrait
					}
					this.$refs.TIMComment.join(inUser, this.detail.rongIm.room_id, true)
				})
			},
			quitTIM(){
				this.$refs.TIMComment.quit()
			},
			//状态变化事件    
			statechange(e) {
				// console.log("状态变化:")
				// console.log(e)
			},
			//网络状态通知事件    
			netstatus(e) {
				console.log("网络状态通知:")
				console.log(e)
				console.log(uni.getSystemInfoSync().platform)
				if (uni.getSystemInfoSync().platform == "android") {
					if (e.detail.info.netJitter)
						this.netstatusText = e.detail.info.netJitter
					else
						this.netstatusText = '网络良好'
				} else {
					if (e.detail.message)
						this.netstatusText = e.detail.message
					else if (e.detail.info.message)
						this.netstatusText = e.detail.info.message
				}
			},
			//渲染错误事件    
			error(e) {
				console.log("错误:" + JSON.stringify(e))
				// uni.showModal({
				// 	title: '错误提示',
				// 	content: JSON.stringify(e)
				// })
			},
			readyStart() {
				if (this.readyStartNumber > 0) return
				this.readyStartNumber = 5
				if (this.redayTimeInterval) {
					clearInterval(this.redayTimeInterval)
					this.redayTimeInterval = null
				}
				this.redayTimeInterval = setInterval((r) => {
					this.readyStartNumber--
					if (this.readyStartNumber <= 0) {
						this.redayTimeInterval = null
						this.start()
						clearInterval(this.redayTimeInterval)
					}
				}, 1000)
			},
			readyPause() {
				// #ifdef H5
				this.playing = 2
				// #endif

				// #ifdef MP-WEIXIN
				this.playing = 2
				this.stop()
				// #endif
			},
			readyResume() {
				// #ifdef H5
				this.playing = 1
				// #endif

				// #ifdef MP-WEIXIN
				this.playing = 1
				this.resume()()
				// #endif
			},
			readyStop() {
				// #ifdef H5
				this.playing = 3
				// #endif

				// #ifdef MP-WEIXIN
				this.playing = 3
				this.stop()
				// #endif
			},
			enableCameraHandle(e) {
				this.enableCamera = e.detail.value
			},
			mutedHandle(e) {
				this.muted = e.detail.value
			},
			qualityChange(e) {
				this.quality = e.detail.value
			},
			beautyHandle(e) {
				this.beauty = e.detail.value
			},
			whitenessHandle(e) {
				this.whiteness = e.detail.value
			},

			start: function() {
				if (!this.playing) {
					// #ifdef H5
					this.playing = true
					this.$common.showSuccess('开始推流')
					// #endif

					// #ifdef MP-WEIXIN
					this.context.start({
						success: (a) => {
							this.playing = true
							this.$common.showSuccess('开始推流')
							if (this.playTimeInteraval) {
								clearInterval(this.playTimeInteraval)
								this.playTimeInteraval = null
							}
							this.playTimeInteraval = setInterval((r) => {
								if (this.playing == 1) {
									this.playingTime++
									this.playingTimeTxt = this.$common.timeFormat(this.playingTime, 'h:m:s')
								}
							}, 1000)
							console.log("开始推流:" + JSON.stringify(a));
						},
						fail: (b) => {
							console.log(a);
						}
					});
					// #endif
				}
			},
			close: function() {
				this.context.close({
					success: (a) => {
						if (this.playTimeInteraval) {
							clearInterval(this.playTimeInteraval)
						}
						console.log("关闭推流:" + JSON.stringify(a));
					}
				});
			},
			snapshot: function() {
				this.context.snapshot({
					success: (e) => {
						console.log("快照:" + JSON.stringify(e));
					}
				});
			},
			resume: function() {
				this.context.resume({
					success: (a) => {
						console.log("恢复推流:" + JSON.stringify(a));
					}
				});
			},
			pause: function() {
				this.context.pause({
					success: (a) => {
						console.log("暂停推流:" + JSON.stringify(a));
					}
				});
			},
			stop: function() {
				this.context.stop({
					success: (a) => {
						if (this.playTimeInteraval) {
							clearInterval(this.playTimeInteraval)
						}
						console.log("停止推流:" + JSON.stringify(a));
					}
				});
			},
			switchCamera: function() {
				this.context.switchCamera({
					success: (a) => {
						console.log("切换摄像头:" + JSON.stringify(a));
					}
				});
			},
			startPreview: function() {
				this.context.startPreview({
					success: (a) => {
						this.height = this.windowHeight
						this.$common.showSuccess('开启预览状态')
						console.log("livePusher.startPreview:" + JSON.stringify(a));
					}
				});
			},
			stopPreview: function() {
				this.context.stopPreview({
					success: (a) => {
						console.log("livePusher.stopPreview:" + JSON.stringify(a));
					}
				});
			},
			getDetail() {
				this.$http
					.get('in_live_push', {
						id: this.id,
					})
					.then((response) => {
						let detail = response.data.data
						detail.detail.start_time = this.$common.timeFormat(detail.detail.start_time)
						this.detail = detail
						this.$nextTick((r) => {
							this.loginIm()
							// #ifdef MP-WEIXIN
							this.context = uni.createLivePusherContext("livepusher1", this)
							if (this.enableCamera) this.startPreview()
							// #endif
						})
						console.log(this.detail)
					})
					.catch((response) => {
						console.log(response)
					})
			},
			clientChange(e) {
				console.log(e)
			},
			memberChange(e){
				this.memberNum = e
			},
			goback() {
				uni.navigateBack({

				})
			}
		},
	}
</script>

<style>
	.top-controller {
		padding-top: 70px;
	}

	.start-view {
		height: 40vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text-xxxl {
		font-size: 60rpx;
	}

	.text-xxxxl {
		font-size: 160rpx;
	}

	.live-bg,
	.live-roles,
	.live-video,
	.live-controller {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.live-bg {
		z-index: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		left: 0;
	}

	.live-video {
		z-index: 1;
	}

	.live-controller {
		z-index: 10;
	}

	.live-bg .bg {
		width: 100%;
		height: 100%;
	}

	.live-bg .bg image {
		width: 100%;
		height: 100%;
	}

	.filter {
		background-color: #000000;
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-o-filter: blur(15px);
		-ms-filter: blur(15px);
		filter: blur(15px);
	}

	.comment-view {
		width: 100%;
		height: 45vh;
		bottom: 0;
		position: absolute;
	}

	.status-view {
		background-color: rgb(0, 0, 0, 0.5) !important;
	}

	.blackbg {
		background-color: rgb(0, 0, 0, 0.5) !important;
	}

	.foot-controller {
		background: none !important;
		box-shadow: none !important;
	}
</style>
